<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :title="
      isUpdate ? '为[' + form.username + ']修改信息流账户' : '添加信息流账户'
    "
    :visible="visible"
    class="ele-popup-dialog"
    custom-class="ele-dialog-form"
    width="600px"
    @closed="onDialogClose"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
        <el-tab-pane label="扩展信息" name="extend"></el-tab-pane>
      </el-tabs>

      <div v-if="activeName === 'basic'">
        <div style="margin-top: 20px">
          <el-form-item label="推广帐号:" prop="username">
            <el-input
              v-model="form.username"
              :disabled="isUpdate"
              clearable
              placeholder="请输入推广帐号"
            />
          </el-form-item>
          <el-form-item label="推广密码:" prop="password">
            <el-input
              v-model="form.password"
              clearable
              placeholder="请输入推广密码"
            />
          </el-form-item>

          <el-form-item label="token:" prop="token">
            <el-input
              v-model="form.token"
              clearable
              placeholder="请输入Token"
            />
          </el-form-item>

          <el-form-item label="推广市场:" prop="bazaarId">
            <el-select
              v-model="form.bazaarId"
              class="ele-block"
              clearable
              placeholder="请选择推广市场"
              @change="changeBazaarId"
            >
              <el-option
                v-for="item in BazaarList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="落地页:" prop="domainIds">
            <el-select
              v-model="form.domainIds"
              class="ele-block"
              clearable
              multiple
              placeholder="请选择落地页"
            >
              <template v-for="item in DomainUrlList">
                <el-option
                  v-if="SelectBazaarId === item.bazaar"
                  :key="item.id"
                  :label="item.DomainUrl"
                  :value="item.id"
                />
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="回传方式:">
            <el-radio-group v-model="form.ocpcType">
              <el-radio :label="1">自动回传</el-radio>
              <el-radio :label="2">手动回传</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="OCPC:">
            <el-input
              v-model="form.ocpc"
              clearable
              placeholder="请输入账户OCPC"
            />
          </el-form-item>
          <el-form-item>
            <span slot="label"
              >上报
              <el-popover
                placement="top-start"
                title="OCPC验证"
                trigger="hover"
              >
                <p>
                  复制停留时长大于多少秒OCPC上报,
                  不填写或者为0则调用系统全局参数
                </p>
                <template slot="reference">
                  <i
                    class="el-tooltip el-icon-_question"
                    style="cursor: pointer; margin-right: 10px"
                  ></i>
                </template>
              </el-popover>
              <span style="margin-left: -5px">:</span>
            </span>
            <el-input
              v-model="form.ocpcTime"
              clearable
              placeholder="复制停留时长大于多少秒OCPC上报."
            />
          </el-form-item>
          <el-form-item label="转换类型:">
            <el-select
              v-model="form.ocpcCode"
              class="ele-block"
              placeholder="请选择转换类型"
            >
              <el-option-group
                v-for="group in ocpcCodeList"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div v-if="activeName === 'extend'">
        <div style="margin-top: 20px">
          <el-form-item label="账户ID:">
            <el-input
              v-model="form.userid"
              :disabled="true"
              placeholder="账户ID自动获取"
            />
          </el-form-item>

          <el-form-item label="统计ID:">
            <el-input
              v-model="form.siteid"
              placeholder="请输入统计ID, 不输入将自动获取."
            />
          </el-form-item>
          <!--<el-form-item label="负责人:">
            <el-input
              v-model="form.contact"
              clearable
              placeholder="请输入账户负责人"
            />
          </el-form-item>-->
          <el-form-item label="开户渠道:" prop="channelid">
            <el-select
              v-model="form.channelid"
              class="ele-block"
              clearable
              placeholder="请选择开户渠道"
            >
              <el-option
                v-for="item in channelList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="归属客户:" prop="customerid">
            <el-select
              v-model="form.customerid"
              class="ele-block"
              clearable
              placeholder="请选择归属客户"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="负责人:" prop="contact">
            <el-select
              v-model="form.contact"
              class="ele-block"
              clearable
              placeholder="请选择负责人"
            >
              <el-option
                v-for="item in principalList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="账户返点:" prop="rebate">
            <el-input-number
              v-model="form.rebate"
              :max="999999"
              :min="0"
              class="ele-fluid ele-text-left"
              controls-position="right"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="备注:">
            <el-input
              v-model="form.remark"
              :rows="2"
              clearable
              placeholder="请输入备注"
              type="textarea"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "feedAccountEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  data() {
    return {
      // TAB切换
      activeName: "basic",
      //市场列表
      BazaarList: [],
      //开户渠道
      channelList: [],
      //归属客户
      customerList: [],
      //负责人
      principalList: [],
      // 选择市场ID
      SelectBazaarId: 0,
      // 表单数据
      form: Object.assign(
        {},
        {
          username: "",
          password: "",
          token: "",
          bazaarId: "",
          channelid: "",
          customerid: "",
          domainIds: [],
          ocpcType: 1,
          ocpc: "",
          ocpcTime: "",
          ocpcCode: null,
          userid: "",
          siteid: "",
          rebate: "",
          remark: "",
        },
        this.data
      ),
      // 推广落地页
      DomainUrlList: [],
      // 转化编码类型明细
      ocpcCodeList: [
        {
          label: "转化编码类型",
          options: [
            {
              value: 35,
              label: "微信复制按钮点击",
            },
            {
              value: 1,
              label: "咨询按钮点击",
            },
            {
              value: 3,
              label: "表单提交成功",
            },
            {
              value: 19,
              label: "一句话咨询",
            },
          ],
        },
      ],
      // 表单验证规则
      rules: {
        username: [
          {
            required: true,
            type: "string",
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入推广账户"));
              }
              this.$http
                .get("/feed/query?param=" + value)
                .then((res) => {
                  if (res.data.code !== 0 || !res.data.data.length) {
                    return callback();
                  }
                  if (
                    this.isUpdate &&
                    res.data.data[0].username === this.data.username
                  ) {
                    return callback();
                  }
                  callback(new Error("推广账户已存在"));
                })
                .catch(() => {
                  callback();
                });
            },
          },
        ],
        password: [
          { required: true, message: "请输入推广密码", trigger: "blur" },
        ],
        token: [{ required: true, message: "请输入Token", trigger: "blur" }],
        bazaarId: [
          { required: true, message: "请选择推广市场", trigger: "blur" },
        ],
        domainIds: [
          { required: true, message: "请选择落地页", trigger: "blur" },
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      this.channelList = this.data.channel;
      this.customerList = this.data.customer;
      this.principalList = this.data.principal;
      this.BazaarList = this.data.bazaar;
      this.DomainUrlList = this.data.website;
      if (this.data.id) {
        this.form = Object.assign(
          {},
          {
            username: "",
            password: "",
            token: "",
            bazaarId: "",
            channelid: "",
            customerid: "",
            domainIds: [],
            ocpcType: 1,
            ocpc: "",
            ocpcTime: "",
            ocpcCode: null,
            userid: "",
            siteid: "",
            rebate: "",
            remark: "",
          },
          this.data
        );

        let tempArray = [];
        for (let i in this.form.domainIds) {
          if (this.form.domainIds[i]) {
            tempArray.push(this.form.domainIds[i]);
          }
        }

        this.form.domainIds = tempArray;

        if (!this.form.bazaarId) {
          this.form.bazaarId = null;
          this.form.domainIds = [];
        }

        this.SelectBazaarId = this.form.bazaarId;
        this.isUpdate = true;
      } else {
        for (let i in this.form) {
          this.form[i] = null;
        }
        this.form.domainIds = [];
        this.form.ocpcType = 1;
        this.SelectBazaarId = 0;
        this.isUpdate = false;
      }
    },
  },
  methods: {
    onDialogClose() {
      this.activeName = "basic";
    },

    /*市场被改变*/
    changeBazaarId(value) {
      this.form.domainIds = [];
      this.SelectBazaarId = value;
    },

    /* 确定编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.form.userType = 2;
          this.$http
            .post("/feed/" + [this.isUpdate ? "update" : "create"], this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  this.form = Object.assign(
                    {},
                    {
                      username: "",
                      password: "",
                      token: "",
                      bazaarId: "",
                      channelid: "",
                      customerid: "",
                      domainIds: [],
                      ocpcType: 1,
                      ocpc: "",
                      ocpcTime: "",
                      ocpcCode: null,
                      userid: "",
                      siteid: "",
                      rebate: "",
                      remark: "",
                    }
                  );
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped>
.ele-popup-dialog /deep/ .el-dialog__body {
  padding-top: 10px !important;
}
</style>
